import React from 'react'
import './index.scss'

// 引入head组件
import Head from 'next/head'

// 顶部导航
import TopNavigation from '../../components/topNavigation'
// banner
import Banner from '../../components/banner'
// 新闻列表
import NewsList from './newsList'
// 底部组件
import Footer from '../../components/footer'

import {getHeadAndTailData, getMobileArticleData} from "../../api/api";

import Navigation from "../../components/navigation";

// redux 数据
import store from '../../store'

export default class News extends React.Component {
    constructor(props) {
        super(props);
        let {remUrl} =  store.getState()
        let {mobileArticleList} = props
        this.state = {
            // 控制右侧侧边栏展示隐藏
            displayNav: false,
            currentPage: 1,
            remUrl,
            pullDownMsg:'',
            newsListHeight:'',
            page:1,
            mobileArticleList,
            pullLoading: false,
            isLoading: true,
            navFrag: true
        }
    }

    static async getInitialProps() {
        // 底部数据
        let footerData = await getHeadAndTailData()
        let {data} = await getMobileArticleData(1)
        return {
            footerData: footerData.data,
            // 获取移动端新闻列表数据
            mobileArticleList: data.data
        }
    }

    render() {
        return (
            <>
                <Head>
                    <meta charSet='utf-8'/>
                    <title>{this.props.footerData.info.journalism_title}</title>
                    <meta name="keywords" content={this.props.footerData.info.journalism_keywords}/>
                    <meta name="description" content={this.props.footerData.info.journalism_description}/>
                    <link rel="icon" href={this.props.footerData.web_icon}/>
                    <script src={this.state.remUrl}></script>
                </Head>
                <div className='news'  onClick={this.downDisplayNav.bind(this)}>
                    {/*顶部导航*/}
                    <TopNavigation title={'news'} changeDisplayNav={this.changeDisplayNav.bind(this)}/>
                    {/*banner*/}
                    <Banner type={'news'}/>
                    {/*新闻列表*/}
                    <NewsList
                        pullLoading={this.state.pullLoading}
                        isLoading={this.state.isLoading}
                        refreshPage={this.refreshPage.bind(this)}
                        mobileArticleList={this.state.mobileArticleList}/>
                    {/*右侧导航*/}
                    <Navigation  navFrag={this.state.navFrag} displayNav={this.state.displayNav}/>
                    {/*底部*/}
                    <Footer footerData={this.props.footerData}/>
                </div>
            </>

        );
    }
    downDisplayNav(){
        this.state.displayNav && (
            this.setState({
                displayNav: false
            })
        )
    }
    changeDisplayNav() {
        this.setState({
            displayNav: !this.state.displayNav,
            navFrag: false
        })
    }
    async refreshPage(type){
        if(type){
            this.setState({
                page: this.state.page + 1
            }, async () => {
                let {data} = await getMobileArticleData(this.state.page)
                if(data.data.length === 0){
                    this.state.isLoading = false
                }
                let newArr = this.state.mobileArticleList.concat(data.data)
                this.setState({
                    mobileArticleList: newArr
                })
            })
        }else{
            let {data} = await getMobileArticleData(1)
            this.setState({
                mobileArticleList: data.data,
                pullLoading: false,
                isLoading: true
            })
        }
    }
}